<script setup lang="ts">
import type { TableColumnType } from './index.d.ts'

defineProps<{
  column: TableColumnType
}>()

function omitChildren(column: TableColumnType) {
  const { children, ...rest } = column
  return rest
}
</script>

<template>
  <el-table-column v-if="column.children && column.children.length > 0" v-bind="omitChildren(column)">
    <template v-if="column.slotHeader" #header>
      <slot :name="`${column.prop}Header`" v-bind="column">
        {{ column.label }}
      </slot>
    </template>
    <TableColumn v-for="(item) in column.children" :key="item.prop" :column="item" />
  </el-table-column>
  <!-- 标签 -->
  <el-table-column
    v-else-if="column.type === 'tag'"
    v-bind="omitChildren(column)"
  >
    <template v-if="column.slotHeader" #header>
      <slot :name="`${column.prop}Header`" v-bind="column">
        {{ column.label }}
      </slot>
    </template>
    <template #default="scope">
      <div v-if="scope.row[column.prop as any]?.length" un-flex="~ gap-x-2">
        <el-tag
          v-for="(item) in scope.row[column.prop as any]"

          :key="item"
        >
          {{ item }}
        </el-tag>
      </div>
      <el-tag v-else>
        无
      </el-tag>
    </template>
  </el-table-column>
  <!-- 字典标签 -->
  <el-table-column v-else-if="column.type === 'dict'" v-bind="omitChildren(column)">
    <template v-if="column.slotHeader" #header>
      <slot :name="`${column.prop}Header`" v-bind="column">
        {{ column.label }}
      </slot>
    </template>
    <template #default="scope">
      <sy-dict-single-tag
        :data="scope.row"
        :prop="column.prop"
        disable-transitions
        :dict-type="column.dictType ?? ''"
        :value="scope.row[column.prop as any]"
      />
    </template>
  </el-table-column>
  <!-- 自定义插槽 -->
  <el-table-column v-else-if="column.type === 'slot'" v-bind="omitChildren(column)">
    <template v-if="column.slotHeader" #header>
      <slot :name="`${column.prop}Header`" v-bind="column">
        {{ column.label }}
      </slot>
    </template>
    <template #default="scope">
      <slot
        :name="column.prop"
        v-bind="{ ...scope }"
      />
    </template>
  </el-table-column>
  <el-table-column
    v-else
    v-bind="column"
  >
    <template v-if="column.slotHeader" #header>
      <slot :name="`${column.prop}Header`" v-bind="column">
        {{ column.label }}
      </slot>
    </template>
  </el-table-column>
</template>

<style scoped></style>
